<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 1064 1024"
    preserveAspectRatio="xMidYMid meet"
    fill=""
    role="presentation"
    ref="host"
  >
    <g><path fill="#DA0042" d="M8.346 691.2a271.36 271.36 0 1 0 542.72 0 271.36 271.36 0 1 0-542.72 0Z"/><path fill="#004288" d="M788.45 179.937c-5.06-6.502-12.289-10.834-20.952-10.834H252.97c-7.946 0-15.176 3.615-20.234 10.117L122.163 326.636a24.986 24.986 0 0 0-.717 28.907l365.67 549.222c4.322 7.22 12.279 11.561 20.952 11.561h2.16c2.171 0 4.342 0 6.513-.716 8.663-2.171 15.166-9.4 17.336-17.347l358.441-541.276a24.986 24.986 0 0 0-.716-28.897L788.439 179.937zm-33.957 39.752 67.922 96.113h-145.96l-61.43-96.113h139.468zm-199.454 0 61.409 96.113H403.282l61.42-96.113h90.337zm-289.792 0h138.752l-61.42 96.113H193.71l71.547-96.113zm-75.879 146.698h148.87l106.956 383.007L189.38 366.387zm320.144 428.534L390.267 366.377h238.49L509.5 794.931zm67.932-54.927L681.503 365.67h143.81l-247.88 374.324zM821.699 143.81a27.464 27.464 0 1 0 54.917 0 27.464 27.464 0 0 0-54.917 0zm55.644 78.049a27.443 27.443 0 1 0 54.886 0 27.443 27.443 0 0 0-54.886 0zm55.644 78.766a27.464 27.464 0 1 0 54.917 0 27.464 27.464 0 0 0-54.917 0z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Group626405 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
